<template>
   <div class="app">
    <Header></Header>
    <div class="main-content">
      <div class="container">
        <transition  name="fade">
          <router-view></router-view>
        </transition>
      </div>
    </div>
    <Footer ></Footer>
  </div>
</template>

<script setup>
import Header from './views/Header.vue';
import Footer from './views/Footer.vue';
import Main from './views/Main.vue'
import Side from './views/Sidebar.vue'

</script>

<style lang="scss" scoped>
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #e4e6eb;
}

.main-content {
  flex: 1;
  padding: 2rem 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>